<script lang="ts" setup>
import {ref, version} from 'vue'
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost/api'

function get() {
  ///api/get/news
  axios.get('get/news', {params: {id: 999, name: '张三丰'}}).then(res => {
    console.log(res.data)
  }).catch(err => {
    console.log(err)
  })
}

function get2() {
  ///api/get/news
  axios.get('users?id=99&name=test').then(res => {
    console.log(res.data)
  }).catch(err => {
    console.log(err)
  })
}

async function get3() {
  const {data} = await axios({
    url: 'info',
    method: 'GET',
    params: {id: 66, name: '三三'},
    headers: {token: '111111111111'}
  })
  console.log(data)
}

//-------------------------------axios delete
async function del() {
  const {data} = await axios({
    url: 'del',
    method: 'delete',
  })

  console.log(data)
}

async function del2() {
  const {data} = await axios({
    url: 'mydel', //请求地址 http://localhost/api/mydel
    method: 'delete', //请求方法
    params: {
      id: 66,
    }
  })
  console.log(data)
}


//post请求处理
async function p1() {
  const {data} = await axios.post('post/add')
  console.log(data)
}

async function p2() {
  const {data} = await axios.post('post/save', {id: 5, name: '李四', age: 22})
  console.log(data)
}

// put请求处理
async function put1() {
  const {data} = await axios.put('user/add')
  console.log(data)
}

async function put2() {
  //const {data} = await axios.put('put/save', {id: 5, name: '李四', age: 22})
  const {data} = await axios({
    url: 'user/save',
    data: {id: 5, name: '李四', age: 22},
    method: 'put'
  })
  console.log(data)
}


// patch 请求处理
async function pch1() {
  const {data} = await axios.patch('pch/add')
  console.log(data)
}

async function pch2() {
  //const {data} = await axios.put('put/save', {id: 5, name: '李四', age: 22})
  const {data} = await axios({
    url: 'pch/save',
    data: {id: 5, name: '李四', age: 22},
    method: 'patch'
  })
  console.log(data)
}
</script>
<template>

  <h2>axios patch</h2>
  <el-button type="warning" @click="pch1">patch /api/pch/add 没有传参</el-button>
  <el-button type="info" @click="pch2">patch /api/pch/save 有参数</el-button>

  <hr>
  <h2>axios put</h2>
  <el-button type="warning" @click="put1">put /api/put/add 没有传参</el-button>
  <el-button type="info" @click="put2">put /api/put/save 有参数</el-button>

  <hr>
  <h2>axios post</h2>
  <el-button type="warning" @click="p1">post /api/post/add 没有传参</el-button>
  <el-button type="info" @click="p2">post /api/post/save 有参数</el-button>

  <hr>
  <h2>axios delete</h2>
  <el-button type="success" @click="del">delete /api/del 没有传参</el-button>
  <el-button type="success" @click="del2">delete /api/delete 传参</el-button>

  <hr>
  <h2>axios get</h2>
  <el-button type="success" @click="get3">get</el-button>
  <el-button type="primary" @click="get">axios get /api/get/news(id=999&name=张三丰)</el-button>
  <el-button type="primary" @click="get2">axios get /api/users(id=99&name=test)</el-button>
</template>

